<nav class="contactsToolbar-container">

    <label class="contactsToolbar-selectAll">
        <custom-checkbox
            data-custom-ng-model="checkAll"
            data-custom-ng-disabled="disabled"
            data-custom-ng-change="selectAll()"></custom-checkbox>
    </label>

    <button
        data-action="addContact"
        class="pm_button primary"
        translate-context="Action"
        translate-comment="contacts toolbar menu option"
        translate>Add</button>

    <button
        class="delete pm_button"
        type="button"
        data-action="deleteSelectedContacts"
        ng-disabled="noSelection"
        translate-comment="contacts toolbar menu option"
        translate-context="Action"
        translate>Delete</button>

    <button
        class="compose pm_button"
        type="button"
        data-action="composeSelectedContacts"
        ng-disabled="noSelection"
        translate-context="Action"
        translate-comment="contacts toolbar menu option"
        translate>Compose</button>

    <button
        class="merge pm_button"
        type="button"
        data-action="mergeContacts"
        ng-disabled="selectedLength <= 1"
        translate-context="Action"
        translate-comment="contacts toolbar menu option"
        translate>Merge</button>

    <contact-groups-dropdown
        data-type="contact"
        data-action="addToContact"
        class="pm_button contactsToolbar-contactGroup"
        ng-disabled="noSelection"></contact-groups-dropdown>


    <div class="contactsToolbar-right">
        <div class="pull-right">
            <paginator-scope
                data-type="contacts"
                data-page="currentPage"
                data-total-items="totalItems"
                data-items-per-page="numPerPage"
                data-change="selectPage">
            </paginator-scope>
        </div>
    </div>
</nav>
